<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#00aaff" status-bar left-icon="left" title="账簿提现" @clickLeft="back"/>
		<view class="body">
			<uni-forms ref="baseForm" :model="model" :rules="rules" label-position="top" label-width="150">
				<uni-forms-item label="户名" name="account_name">
					<uni-easyinput v-model="model.account_name" disabled/>
				</uni-forms-item>
				<uni-forms-item label="手机号" name="mobile">
					<uni-easyinput type="number" v-model="model.mobile" disabled/>
				</uni-forms-item>
				<uni-forms-item label="银行卡号" name="card_id">
					<uni-data-picker placeholder="使用默认银行卡" popup-title="请选择银行卡号" v-model="model.card_id" :localdata="card_list" @change="onchange"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="金额" name="amount" required>
					<uni-row :gutter="20">
						<uni-col :span="16">
							<uni-easyinput type="digit" v-model="model.amount" :maxlength="16" placeholder="请输入提现金额"/>
						</uni-col>
						<uni-col :span="8">
							<button size="mini" type="warn" class="all-btn" @click="allBalance()">全部提现</button>
						</uni-col>
					</uni-row>
					<view v-if="fee > 0" style="color: #ff5500">手续费：{{ fee }} 元</view>
				</uni-forms-item>
				<uni-forms-item label="摘要" name="trans_summary">
					<uni-easyinput type="textarea" v-model="model.trans_summary" :maxlength="256" placeholder="请输入摘要" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="verify_code">
					<send-sms-code 
						trade_type="3"
						:mobile="account_info.mobile"
						:card_name="account_info.id_name || account_info.account_name"
						:id_no="account_info.id_no"
						:account_no="account_info.account_no"
						:card_no="card_default.primary_account"
						:amount="real_amount"
						v-model="model.verify_code"
						@onSend="handleOnSendCode"
					></send-sms-code>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="onSubmit">立即提现</button>
		</view>
	</view>
</template>

<script>
	import SendSmsCode from "@/components/formItem/SendSmsCode"
	
	export default {
		
		components : {
			SendSmsCode
		},
		
		data() {
			return {
				model: {},
				rules: {
					amount: {
						rules: [
							{ required: true, errorMessage: '请输入正确金额'},
							{ pattern: '^[1-9]\\d*(,\\d{3})*(\\.\\d{1,2})?$|^0\\.\\d{1,2}$', errorMessage: '请输入正确金额'}
						]
					},
					verify_code: {
						rules: [
							{ required: true, errorMessage: '请输入正确验证码'}
						]
					}
				},
				userInfo: {},
				account_info: {},
				card_list: [],
				selected: 0,
				card_default: {}
			}
		},
		
		computed: {
			real_amount() {
				let real = (this.model.amount - this.fee).toFixed(2)
				return real > 0 ? real.toString() : '0'
			},
			
			fee() {
				if(Object.keys(this.card_default).length === 0) {
					return 0
				}
				
				if(this.card_default.account_property == 2) {
					return 5.75
				}
				
				if(this.card_default.isLocal == 1) {
					return 0
				}
				
				if(this.model.amount > 0) {
					return 5.75
				}
				
				return 0
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid')
			
			if(!uid) {
				uni.redirectTo({
					url:'/pages/login/index'
				})
			} else {
				this.getAccountInfo(uid)
				this.getBankAccountInfo(uid)
				this.getBankCardList(uid)
			}
		},
		
		methods: {
			
			back() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			
			getAccountInfo(uid) {
				uni.request({
					url: '/account/getAccountInfo',
					data: {
						uid
					},
					success: res => {
						if(res.data.success) {
							this.userInfo = res.data.data;
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					}
				});
			},
			
			getBankAccountInfo(uid) {
				uni.request({
					url: '/account/getBankAccountInfo',
					data: {
						uid
					},
					success: (res) => {
						if(res.data.success) {
							this.account_info = res.data.data
							this.model = {
								account_name: res.data.data.account_name,
								mobile: res.data.data.mobile,
								realname: res.data.data.realname,
								id_no: res.data.data.id_no,
								account_no: res.data.data.account_no,
								...this.model
							}
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					}
				})
			},
			
			getBankCardList(uid) {
				uni.request({
					url: '/card/getBankCardList',
					data: {
						uid
					},
					success: (res) => {
						if(res.data.success) {
							let card_list = res.data.data.card_list
							this.card_list = card_list.map( item => {
								let text = `${item.bank_name}-(${item.primary_account.substring(0, 4)}****${item.primary_account.substr(-4)})`;
								if(item.is_default == '1') {
									this.card_default = item
									this.model.card_id = item.id
								}
								return { value: item.id, text, ...item }
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					}
				})
			},
			
			allBalance() {
				this.model = {
					amount : this.userInfo.withdraw_balance_t,
					...this.model
				}
			},
			
			onchange( { detail } ) {
				if(detail.value.length > 0) {
					this.card_default = this.card_list.find( (item) => {
						return item.value == detail.value[0].value
					})
				} else {
					this.card_default = this.card_list.find( (item) => {
						return item.is_default == '1'
					})
				}
			},
			
			handleOnSendCode(data) {
				this.model = {
					 ...this.model,
					 ...data
				}
			},
			
			onSubmit() {
				if(!('trade_no' in this.model) || this.model.trade_no == "" ) {
					uni.showToast({
						icon: 'error',
						title: '请先发送验证码'
					})
					return ;
				}
				
				this.$refs.baseForm.validate().then(res => {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					
					let data =  {
							uid: uni.getStorageSync('uid'),
							primary_account: this.card_default.primary_account,
							account_id: this.account_info.bank_account_id,
							fee: this.fee,
							...this.model
						}
					
					data.amount = this.real_amount
						
					uni.request({
						url: "/trade/withdraw",
						data,
						method: "POST",
						success: (res) => {
							if(res.data.success) {
								uni.redirectTo({
									url: '/pages/trade/waiting?serial_no='+res.data.data.serial_no+'&type=withdraw'
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.errMessage
								})
							}
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 750rpx;
		padding: 40rpx 60rpx;
		box-sizing: border-box;
		background: #fff;
	}
	
	.all-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		margin-left: 20rpx;
	}
	
</style>